<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用IndexedDB实现学生基本信息采集</title>
		<style>
			fieldset{text-align: center;border: 1px dashed #FF0000;}
			.myBtn{width: 80PX;height: 35PX;border: 1PX dashed #0066ff;}
		</style>
		<script type="text/javascript">
			var db,request,objectStore;
			function createDB(dbName){
				request=indexedDB.open(dbName,1);
				request.onerror=function(){
					alert("打开数据库失败："+event.target.errorCode);
				}
				request.onsuccess=function(event){
					alert("打开数据库成功！");
					db=event.target.result;
					var transaction=db.transaction("user","readwrite");
					objectStore=transaction.objectStore("user");
				}
				request.onupgradeneeded=function(event){
					alert("版本已经发生改变！");
					db=event.target.result;
					objectStore=db.createObjectStore("user",{keyPath:"userNo"});
					indexNo=objectStore.createIndex("by_userNo","userNo",{unique:true});
				}
			}
			createDB('userinfo');
			function deleteDB(dbName){
				request=indexedDB.deleteDatabase(dbName);
				request.onerror=function(){
					alert("删除数据库失败");
				}
				request.onsuccess=function(event){
					alert("删除数据库成功");
					var ta=document.getElementById("display");
					ta.innerHTML='';
					window,location.reload();
				}
			}
			function getObject(){
				var txtAear=document.getElementById("display");
				txtAear.innerHTML="";
				if(!db){
					alert("请先打开数据库！");
					return false;
				}
				var store=db.transaction("user").objectStore("user");
				var keyRange=IDBKeyRange.lowerBound(0);
				var cursorRequest=store.openCursor(keyRange);
				cursorRequest.onsuccess=function(e){
					var result=e.target.result;
					if(!!result==false)
						return;
					getOneObject(result.value);
					result.continue();
				}
				cursorRequest.onerror=function(e){
					alert("数据检索失败！");
				}
			}
			function getOneObject(e){
				var ta=document.getElementById("display");
				ta.innerHTML+="学号："+e.userNo+"姓名："+e.username+",入学年龄"+e.userage+",性别："+e.usersex+"\n";
			}
			function addObject(){
				var userID=document.getElementById("xuehao").value;
				var name=document.getElementById("name").value;
				var age=document.getElementById("age").value;
				var sex,flag=document.getElementById("nan").checked;
				sex=(flag)?"男":"女";
				if(userID.length>0&&name.length>0&&age>=0&&sex.length>0){
					var detail={
						userNo:userID,username:name,userage:
						age,usersex:sex
					}
					if(!db){
						alert("请先打开数据库");
						return false;
					}
					var transaction=db.transaction(["user"],"readwrite");
					objectStore=transaction.objectStore("user");
					objectStore.add(detail);
					alert("数据添加成功");
					myFrm.Reset();
				}else{
					alert("输入数据不合法！请重新输入");
					myFrm.xuehao.focus();
				}
			}
			
			
		</script>
	</head>
	<body>
		<form name="myFrm">
			<fieldset>
				<legend align="center">学生基本信息采集</legend>
				学生学号；<input type="text" name="xuehao" id="xuehao" required="required" ><br />学生姓名：
				<input type="text" name="name" id="name" required="required"/><br />入学年龄：
				<input type="number" name="age" id="age" value="20" min="1"/><br />性别：
				<input type="radio" name="xb" id="nan" value="male" checked/>男
				<input type="radio" name="xb" id="nv" value="female"/>女<br />
				<input type="button" class="myBtn" onclick="addObject()" value="获取数据">
				<input type="button" class="myBtn" onclick="deleteDB()('userinfo')"value="删除数据库"/><br />
				<textarea id="display" rows="5" cols="45"></textarea>
			</fieldset>
		</form>
	</body>
</html>
